<template>
  <div class="toolBtn">
    <div
      class="sm-tool-btn"
      :style="toolStyle"
      v-for="(item, index) in iconData"
      @click.stop="toolBtns(item.name)"
      @mousedown.stop="() => true"
      :key="index"
    >
      <i :class="lineType" class="line" v-if="index > 0" />
      <i class="iconfont sm-btn" :class="[item.icon]" :title="item.name" />
    </div>
  </div>
</template>

<script>
export default {
  name: "ToolBtn",
  props: {
    // 工具按钮的图标数据
    iconData: {
      type: Array,
      default: () => [],
    },
    // 工具按钮的样式
    toolStyle: {
      type: Object,
      default: () => {
        return { width: "22px", height: "22px" };
      },
    },
    // 工具按钮的分割线类型
    lineType: {
      type: String,
      default: "verticalLine",
    },
  },
  methods: {
    toolBtns(title) {
      this.$emit("toolBtnChange", title);
    },
  },
};
</script>

<style scoped lang="scss">
.toolBtn {
  overflow: hidden;
  // 横向
  .horizontalLine {
    height: 1px;
    width: 80%;
    left: 10%;
  }
  // 竖向
  .verticalLine {
    width: 1px;
    height: 15px;
    top: 4px;
    left: 0;
  }
  .line {
    display: block;
    position: absolute;
    background-color: #969696;
  }
  .sm-tool-btn {
    color: white;
    float: left;
    line-height: 28px !important;
    text-align: center;
    position: relative;
    background: rgba(51, 51, 51, 0.9);
    vertical-align: top;
    cursor: pointer;
    &:hover {
      background-color: #333;
    }
  }
}
</style>
